<template>
  <div class="all">
    <!-- <el-card style="margin-bottom: 20px">
      <el-button type="success" round>
        <router-link to="/table" active-class="activeClass" exact
          >table</router-link
        >
      </el-button>
   
      <el-button type="success" round>
        <router-link to="/two" active-class="activeClass">Two</router-link>
      </el-button>
      <el-button type="success" round>
        <router-link to="/three" active-class="activeClass">Three</router-link>
      </el-button>
    </el-card> -->
    <div id="menus">
      <!-- <router-view></router-view> -->
      <div class="hello">
        <el-card style="margin-bottom: 20px" class="cards">
          <div style="display: flex; justify-content: space-between">
            <div class="divb">{{ title }}</div>
            <div>
              <svg-icon icon-class="data" style="font-size: 20px"></svg-icon
              >{{ timer }}
            </div>
            <div id="divs">
              <div class="diva">
                <img :src="headPortrait.headPortrait" alt="" />
              </div>
              <div style="margin-right: 10px">{{ headPortrait.Useranme }}</div>

              <div @click="exit">退出</div>
            </div>
          </div>
        </el-card>
        <div style="display: flex; height: 90vh; width: 100vw">
          <el-card class="menu">
            <el-menu
              style="height: 100vh; width: 12vw; border-right: none"
              default-active="2"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
              text-color="black"
              active-text-color="#ffd04b"
            >
              <el-submenu index="1">
                <template slot="title">
                  <i class="el-icon-location"></i>
                  <span>全部</span>
                </template>
                <el-menu-item-group>
                  <template slot="title"></template>
                  <!-- <keep-alive include="mora"> -->
                  <router-link to="/table">
                    <el-menu-item index="1-1">table</el-menu-item>
                  </router-link>
                  <router-link to="/three">
                    <el-menu-item index="1-2">three</el-menu-item>
                  </router-link>
                  <router-link to="/timepack">
                    <el-menu-item index="1-3">timepack</el-menu-item>
                  </router-link>
                  <router-link to="/Carousel">
                    <el-menu-item index="1-4">走马灯</el-menu-item>
                  </router-link>
                  <router-link to="/tree">
                    <el-menu-item index="1-5">树形组件</el-menu-item>
                  </router-link>
                  <router-link to="/ajax">
                    <el-menu-item index="1-6">Promise封装ajax</el-menu-item>
                  </router-link>
                  <router-link to="/ImageVerification">
                    <el-menu-item index="1-7">图片验证</el-menu-item>
                  </router-link>
                  <router-link to="/media">
                    <el-menu-item index="1-8">媒体查询</el-menu-item>
                  </router-link>

                  <router-link to="/mora">
                    <el-menu-item index="1-9">猜拳游戏</el-menu-item>
                  </router-link>
                  <router-link to="/vuedraggable">
                    <el-menu-item index="1-10">拖拽组件</el-menu-item>
                  </router-link>

                  <router-link to="/luckydraw">
                    <el-menu-item index="1-11">幸运抽奖</el-menu-item>
                  </router-link>

                  <router-link to="/watermark">
                    <el-menu-item index="1-12">水印</el-menu-item>
                  </router-link>

                        <router-link to="/loadText">
                    <el-menu-item index="1-13">加载文字</el-menu-item>
                  </router-link>
                  <!-- </keep-alive> -->
                </el-menu-item-group>
              </el-submenu>
              <!-- <el-submenu index="2">
                <template slot="title">
                  <i class="el-icon-location"></i>
                  <span>地图</span>
                </template>
                <el-menu-item-group>
                  <template slot="title"></template>
                  <router-link to="/two">
                    <el-menu-item index="2-1">two</el-menu-item>
                  </router-link>
                </el-menu-item-group>
              </el-submenu> -->
            </el-menu>
          </el-card>
          <div style="flex: 1; overflow-y: scroll; margin-left: 10px">
            <router-view></router-view>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
// import {searchs} from "../api/index"
import { logout } from "../../api/index";
var dayjs = require("dayjs");
export default {
  computed: {
    headPortrait() {
      return JSON.parse(localStorage.getItem("userInfo"));
    },
    title() {
      return this.$route.matched
        .map((r) => {
          return r.meta.title;
        })
        .join("/");
    },
    ...mapState(["timeArrary"]),
  },
  data() {
    return {
      timer: "",
      alltimes: "",
      activeIndex2: "1",
      color: ["红色", "紫色", "绿色"],
      colors: ["red", "purple", "green"],
      la: [],
    };
  },

  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    // 退出
    exit() {
      // axios.post('http://localhost:8008/exit')
      // logout();
      localStorage.removeItem("token");
      localStorage.removeItem("userInfo");
      this.$router.push("/");
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
  mounted() {
    this.timer = dayjs(new Date()).format("YYYY--MM-DD HH:mm:ss");
    setInterval(() => {
      this.timer = dayjs(new Date()).format("YYYY--MM-DD HH:mm:ss");
    }, 1000);
  },
  watch: {
    timeArrary: {
      handler(a, b) {
        this.$message(`${a}`);
      },
      deep: true, //深度监听
      // immediate: true, //立即监听
    },
  },
};
</script>

<style lang="scss">
// .all{
// filter: grayscale(1);
// }
::v-deep .cards .el-input__inner {
  width: 300px;
}
.cards {
  height: 10vh;
  width: 100vw;
}
#divs {
  display: flex;

  align-items: center;

  .diva {
    // border: 1px solid #ccc;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
    img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
  }
}

#menus {
  display: flex;
  height: 100vh;
  .menu {
    //  border: 1px solid red
    overflow-y: scroll;
  }
  .hello {
  }
}
.all {
  overflow: hidden;
}
::v-deep .el-menu-vertical-demo::before {
  height: 1000px;
  widows: 500px;
}
</style>
